<template>
  <div class="collected-view">
		<!-- 顶部导航栏 -->
    <div class="top-nav">
      <van-nav-bar fixed placeholder left-text="喜欢的商品" left-arrow @click-left="goBack">
        <template #right>
          <van-goods-action-icon
            v-if="shopCartData != null"
            icon="cart-o"
            :badge="shopCartData.length"
            @click="goToShopCart"
          />
          <div class="edit" style="margin-left: 15px" @click="edit">
            {{ !editStatus ? "管理" : "完成" }}
          </div>
        </template>
      </van-nav-bar>
    </div>
		<!-- 收藏列表 -->
    <div class="content">
      <div class="content-list-wrap" v-if="collectedData != null">
        <div
          class="content-list"
          v-for="(item, index) in collectedData"
          :key="item.createTime"
        >
          <div class="checkbox" v-if="editStatus">
            <van-checkbox
              v-model="item.checkState"
              @click="chooseOne(item.checkState)"
            ></van-checkbox>
          </div>
          <van-card
            :price="item.price"
            :desc="item.version + ' ' + item.color"
            :title="item.name"
            :thumb="item.img"
            @click-thumb="goToGoodsDetail({id:15694,router:$router})"
          >
            <template #num v-if="!editStatus">
              <div class="add-btn" @click="addDataToShopCart(item)">
                <van-icon name="plus" />
              </div>
            </template>
          </van-card>
        </div>
      </div>
    </div>
		<!-- 底部删除与全选 -->
    <van-submit-bar
      button-text="删除"
      button-color="rgb(255, 63, 15)"
      @submit="deleteData"
      v-if="editStatus"
    >
      <van-checkbox v-model="checkAll" @click="ChooseAll">全选</van-checkbox>
    </van-submit-bar>
  </div>
</template>

<script>
import {mapMutations} from 'vuex'
export default {
  name: "CollectedView",
  data() {
    return {
      //购物车数据
      shopCartData: null,
      //收藏数据
      collectedData: null,
      //添加到购物车数据的商品数量
      shopCartDataCount: 0,
      //编辑状态
      editStatus: false,
      //全选状态
      checkAll: false,
      //单选个数
      chooseOneCount: 0,
    };
  },
  activated() {
    this.shopCartData = JSON.parse(localStorage.getItem("shopcartData"));
    this.collectedData = JSON.parse(localStorage.getItem("collectedData"));
  },
  methods: {
    ...mapMutations(['goToGoodsDetail']),
    //跳转购物车
    goToShopCart() {
      this.$router.push({ name: "ShopcartView" });
    },
    //返回上一级路由
    goBack() {
      this.$router.go(-1);
    },
    //添加数据到购物车
    addDataToShopCart(item) {
      item.checkState = false;
      let img = { img: item.img };
      item.num = 1;
      let idArr = [];
      this.shopCartData.forEach((item) => {
        idArr.push(item.createTime);
      });
      if (idArr.indexOf(item.createTime) == -1) {
        this.shopCartData.push({ ...item, img });
        localStorage.setItem("shopcartData", JSON.stringify(this.shopCartData));
        this.$toast.success("添加购物车成功");
      } else {
        this.$dialog
          .confirm({
            title: "标题",
            message: "已添加商品，是否前往购物车查看?",
          })
          .then(() => {
            this.$router.push({ name: "ShopcartView" });
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //管理
    edit() {
      this.editStatus = !this.editStatus;
      if (this.editStatus) {
        this.collectedData.forEach((item) => {
          item.checkState = false;
        });
        this.checkAll = false;
        this.chooseOneCount = 0;
      }
    },
    //删除
    deleteData() {
      let arr = [];
      this.collectedData.forEach((item, index) => {
        if (!item.checkState) {
          arr.push(item);
          if (item.checkState) {
            this.chooseOneCount--;
          }
          if (this.chooseOneCount == this.collectedData.length) {
            this.Allchecked = true;
          } else {
            this.Allchecked = false;
          }
        }
      });
      this.collectedData = arr;
      localStorage.setItem("collectedData", JSON.stringify(this.collectedData));
      this.chooseOneCount = 0;
      if (this.collectedData.length == 0) {
        this.Allchecked = false;
      }
    },
    //全选
    ChooseAll() {
      if (this.checkAll) {
        this.collectedData.forEach((item) => {
          item.checkState = true;
        });
        this.chooseOneCount = this.collectedData.length;
      } else if (!this.checkAll) {
        this.collectedData.forEach((item) => {
          item.checkState = false;
        });
        this.chooseOneCount = 0;
      }
    },
    //单选
    chooseOne(checked) {
      if (checked) {
        this.chooseOneCount++;
        if (this.chooseOneCount == this.collectedData.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      } else if (!checked) {
        this.chooseOneCount--;
        if (this.chooseOneCount == this.collectedData.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.collected-view {
  width: 100vw;
  height: 100vh;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  .content {
    padding: 0 10px 60px;
    box-sizing: border-box;
  }
  ::v-deep .van-nav-bar__arrow {
    color: #000;
		font-size: 18px;
  }
  ::v-deep .van-nav-bar__text {
    color: #000;
  }
  ::v-deep .van-icon-cart-o {
    color: #000;
    font-size: 25px;
    position: relative;
    top: 2px;
  }
  ::v-deep .van-card__content {
    text-align: left;
    margin-left: 15px;
  }
  ::v-deep .van-card {
    background-color: #fff;
    margin: 10px 0;
    flex: 1;
  }
  ::v-deep .van-card__price {
    color: rgb(255, 63, 15);
    font-size: 15px;
  }
  ::v-deep .van-card__price-integer {
    font-size: 20px;
  }
  ::v-deep .van-submit-bar__bar {
    justify-content: space-between;
  }
  .content-list-wrap {
    .content-list {
      display: flex;
      align-items: center;
      .checkbox {
        margin-left: 5px;
      }
      .add-btn {
        width: 25px;
        height: 25px;
        border-radius: 999px;
        border: 1px solid #ddd;
        font-size: 18px;
        box-sizing: border-box;
        text-align: center;
        line-height: 25px;
      }
    }
  }
}
</style>